<template>
  <div class="login-box flex-none web">
   <!-- <div style="color:red; padding-top: 160px;" @click="redirectToWeChatLogin">微信登录</div>
    <div style="color:red" @click="isWeChatLogin">code登录</div> -->
    <router-link v-if="userStore.isLogin && userInfo" to="/my" class="my-btn" :style="{backgroundImage:`url(${userInfo.avatar || avatar})`}"></router-link>
    <div class="need-login" v-if="!userStore.isLogin && !isWeChat" @click="loginShow()">
      <el-button link class="need-login-btn"><img :src="avatar" class="tx" alt=""></el-button>
      <p class="cur">登录</p>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { userinfosApi } from '@/api/app'
  import { httpsApi } from '@/api/app';
  import { useUserStore } from '@/stores/user'
  import { loginShow, isWeChat } from '@/utils/weChat'
  import avatar from '@/assets/images/tx.png'
  import { useRoute } from 'vue-router';
  import { computed, ref } from 'vue';
  const route = useRoute();
  const userStore = useUserStore();
  const userInfo = computed(()=>{
    const a = typeof userStore.userInfo === 'string';
    return !userStore.userInfo ? null : a ? JSON.parse(userStore.userInfo) : userStore.userInfo
  })

  console.log('userStore--------------------------', userStore.token)
  
  const timeRun = ref()
  if(userInfo.value && !userInfo.value.mobile && !route.path.includes('/my/mobile')){
    timeRun.value = setTimeout(()=>{
      // alert(`有用户信息，进入绑定页面---${userInfo.value.nickname}-${userInfo.value.mobile}-${userInfo.value.token}`)
      window.location.href = httpsApi+'/my/mobile'
    },800)
  }
  if(timeRun.value){
    clearTimeout(timeRun.value)
  }
  
  if(userStore.token && userStore.isLogin){
    userinfosApi().then(res=>{
      userStore.setUserInfo(res.userInfo)
      console.log('res--------------------------', res)
    }).catch((err)=>{
      console.log('失败', err)
      // userStore.logout()
    })
  }
  
</script>

<style lang="scss" scoped>
  .login-bg{position: fixed; left: 0; top: 0; z-index:var(--zindex3); width: 100%; height: 100%;}
  .need-login{
    color: #666; font-size: 12px; text-align: center;
    .need-login-btn{margin: 0 auto; display: flex;}
    .cur{cursor: pointer;}
  }
  .login-box{position: absolute; left: 0%; bottom: 30px; width:100%}
  .tx{width:40px; height:40px; border-radius: 50%; display: block; margin: 0 auto; }
  .my-btn{
    width:40px; height:40px; border-radius: 50%; display: block; margin: 0 auto; background-size: cover; background-position: center;
    transition: all ease .3s; border:1px solid transparent;
    &:hover{
      border: 1px solid var(--el-color-primary);
    }
  }
  @media only screen and (max-width: 769px){
    .need-login{display: none;}
   .login-box{
     display: block;
     .my-btn{display: none;}
   }
  }
</style>